{% extends 'base.html' %}
{% load static %}

{% block extra_css %}
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="{% static 'grading/images/favicon.ico' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap/bootstrap.min.css' %}">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap-icons/font/bootstrap-icons.css' %}">
<!-- jstree CSS -->
<link rel="stylesheet" href="{% static 'grading/vendor/jstree/themes/default/style.min.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'grading/css/custom.css' %}">
<!-- CodeMirror -->
<link rel="stylesheet" href="{% static 'grading/vendor/codemirror/codemirror.min.css' %}">
<!-- Viewer.js -->
<link rel="stylesheet" href="{% static 'grading/vendor/viewerjs/viewer.min.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- 左侧文件树 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">文件目录</h5>
                    <div class="mt-2">
                        <a href="{% url 'grading:batch_grade_page' %}" class="btn btn-success btn-sm me-2">
                            <i class="bi bi-tasks"></i> 批量登分
                        </a>
                        <a href="{% url 'grading:batch_ai_score_page' %}" class="btn btn-warning btn-sm">
                            <i class="bi bi-robot"></i> 批量AI评分
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div id="directory-tree"></div>
                </div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="col-md-9">

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">文件内容</h5>
                    <div class="file-count-display text-muted small">
                        <span id="directory-file-count">0</span> 个文件
                    </div>
                </div>
                <div class="card-body">
                    <!-- 加载指示器 -->
                    <div id="loading" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>

                    <!-- 文件内容显示区域 -->
                    <div id="file-content" class="mt-3">
                        {% if error %}
                            <div class="alert alert-danger">
                                {{ error }}
                            </div>
                        {% else %}
                            <div class="alert alert-info">
                                请从左侧选择要评分的文件
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 评分区域 -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">评分</h5>
                </div>
                <div class="card-body">
                    <!-- 文件导航按钮 -->
                    <div class="d-flex justify-content-between mb-3">
                        <button type="button" class="btn btn-outline-secondary" id="prev-file">
                            <i class="bi bi-arrow-left"></i> 上一个文件
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="next-file">
                            下一个文件 <i class="bi bi-arrow-right"></i>
                        </button>
                    </div>
                    <!-- 评分按钮组 -->
                    <div class="d-flex align-items-center">
                        <!-- 评分方式切换 -->
                        <div class="btn-group me-3" role="group" aria-label="评分方式">
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn active" data-mode="letter">
                                字母等级
                            </button>
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn" data-mode="text">
                                文字等级
                            </button>
                        </div>



                        <!-- 字母等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="字母评分选项" id="letter-grade-buttons">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="A">A</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="B">B</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="C">C</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="D">D</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="E">E</button>
                        </div>

                        <!-- 文字等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="文字评分选项" id="text-grade-buttons" style="display: none;">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="优秀">优秀</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="良好">良好</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="中等">中等</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="及格">及格</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="不及格">不及格</button>
                        </div>

                        <button type="button" class="btn btn-primary me-2" id="add-grade-to-file" disabled>
                            确定
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="cancel-grade">
                            撤销
                        </button>
                        <button type="button" class="btn btn-outline-info ms-2" id="teacher-comment-btn" disabled>
                            <i class="bi bi-chat-text"></i> 教师评价
                        </button>
                        <button type="button" class="btn btn-outline-success ms-2" id="ai-score-btn" disabled data-ai-grading-disabled="{{ grade_info.ai_grading_disabled }}">
                            <i class="bi bi-robot"></i> AI评分
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 教师评价模态框 -->
<div class="modal fade" id="teacherCommentModal" tabindex="-1" aria-labelledby="teacherCommentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="teacherCommentModalLabel">教师评价</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="teacherCommentText" class="form-label">评价内容：</label>
                    <textarea class="form-control" id="teacherCommentText" rows="8" placeholder="请输入或修改教师评价内容..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveTeacherComment">保存评价</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- jQuery -->
<script src="{% static 'grading/vendor/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="{% static 'grading/vendor/bootstrap/bootstrap.bundle.min.js' %}"></script>

<!-- 初始化数据 -->
<script>
    // 将初始数据传递给 JavaScript
    window.initialTreeData = {{ initial_tree_data|safe }};
    console.log('Initial tree data in template:', window.initialTreeData);

    // 设置 CSRF token
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            }
        }
    });
</script>

<!-- 自定义脚本 - 在jstree之前加载，确保评分功能优先 -->
<script src="{% static 'grading/js/grading.js' %}"></script>

<!-- jstree JavaScript -->
<script src="{% static 'grading/vendor/jstree/jstree.min.js' %}"></script>

<!-- CodeMirror -->
<script src="{% static 'grading/vendor/codemirror/codemirror.min.js' %}"></script>
<!-- Viewer.js -->
<script src="{% static 'grading/vendor/viewerjs/viewer.min.js' %}"></script>
<!-- PDF.js -->
<script src="{% static 'grading/vendor/pdfjs/pdf.min.js' %}"></script>

<script>
    // 设置 PDF.js worker 路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = "{% static 'grading/vendor/pdfjs/pdf.worker.min.js' %}";

    // 确保评分功能在页面完全加载后重新初始化
    $(document).ready(function() {
        console.log('=== 评分系统页面完全加载完成 ===');

        // 延迟重新初始化评分功能，确保其他库加载完成
        setTimeout(function() {
            console.log('重新初始化评分功能...');

            // 重新绑定评分方式切换按钮事件
            $(document).off('click', '.grade-mode-btn').on('click', '.grade-mode-btn', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const mode = $(this).data('mode');
                console.log('=== 评分方式按钮被点击 ===');
                console.log('按钮模式:', mode);
                console.log('按钮元素:', this);
                console.log('按钮文本:', $(this).text());
                if (typeof switchGradeMode === 'function') {
                    switchGradeMode(mode);
                } else {
                    console.error('switchGradeMode函数未定义');
                }
            });

            // 重新绑定评分按钮点击事件
            $(document).off('click', '.grade-button').on('click', '.grade-button', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const grade = $(this).data('grade');
                console.log('Grade button clicked:', grade);
                if (typeof saveGrade === 'function') {
                    saveGrade(grade);
                } else {
                    console.error('saveGrade函数未定义');
                }
            });

            // 重新绑定确定按钮点击事件
            $(document).off('click', '#add-grade-to-file').on('click', '#add-grade-to-file', function(e) {
                e.preventDefault();
                e.stopPropagation();
                console.log('Confirm button clicked, using selected grade:', selectedGrade);
                if (typeof addGradeToFile === 'function') {
                    addGradeToFile(selectedGrade);
                } else {
                    console.error('addGradeToFile函数未定义');
                }
            });

            // 重新绑定撤销按钮点击事件
            $(document).off('click', '#cancel-grade').on('click', '#cancel-grade', function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (typeof cancelGrade === 'function') {
                    cancelGrade();
                } else {
                    console.error('cancelGrade函数未定义');
                }
            });

            console.log('评分功能重新初始化完成');
        }, 1000);
    });
</script>
{% endblock %}
